<#include "../header.html">
<link rel="stylesheet" href="css/tree/style.min.css"/>
<script type="text/javascript" src="js/jstree.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#tree').jstree();
	});
	function alertUsers() {
		JFT.popupPage("userAction.do?method=queryUserAlert", "选择用户", 800, 800);
	}
	var type;
	function initReferrer(){
		var userId = $("#userId").val();
		type = $("#type").val();
		if(userId==''){
			alert("请选择用户");
			return;
		}

		var treeHtml = "<ul class='jstree-container-ul jstree-children' role='group'>";
		treeHtml += "<li  role='treeitem' id='id_"+userId+"' userId='"+userId+"' ishave='1' aria-selected='false' aria-level='1' aria-labelledby='id_"+userId+"_anchor' aria-expanded='true'  class='jstree-node  jstree-last jstree-open' >";
		//treeHtml += "<i class='jstree-icon jstree-ocl' role='presentation'></i>";
		treeHtml += "<a class='jstree-anchor' href='#' tabindex='-1' id='id_"+userId+"_anchor'>";
		treeHtml += "<i class='jstree-icon jstree-themeicon' role='presentation'>";
		treeHtml += "</i><span class='"+getUserType($("#uplevel").val())+"'>"+$("#account").val()+"("+$("#userName").val()+")</span>";
		treeHtml += "</a>";
		treeHtml += "<ul class='jstree-container-ul jstree-children' role='group'></ul></li></ul>";
		$("#tree").html(treeHtml);
		queryReferrerList(userId);
	}
	function getUserType(uplevel){
		var uplevelClass = "uptype_1";
		if(uplevel=="0"){
			uplevelClass = "uptype_0";
		}else if(uplevel=="100"){
			uplevelClass = "uptype_100";
		}else if(uplevel=="1000"){
			uplevelClass = "uptype_1000";
		}
		return uplevelClass;
	}
	function queryReferrerList(userId){
		var userLi = $("#id_"+userId);
		if($(userLi).attr("isHave") != "1"){
			if($(userLi).hasClass("jstree-open")){
				$(userLi).removeClass("jstree-open");
				$(userLi).addClass("jstree-closed");
			}else{
				$(userLi).addClass("jstree-open");
				$(userLi).removeClass("jstree-closed");
			}
			return;
		}else{
			$(userLi).addClass("jstree-open");
			$(userLi).removeClass("jstree-closed");
		}
		beginPageLoading();
		ajaxPost("referrerAction.do?method=queryReferrerList", {userId:userId,type:type}, function(data){
			endPageLoading();
			if(data["resultCode"] == 0){
				var resultData = data["resultData"];
				if(resultData!=null&& resultData.length>0){
					var liHtml = "";
					for(var i = 0;i<resultData.length;i++){
						var user  =  resultData[i];

						if(user["isHave"]==1){
							liHtml += "<li isHave = '1' id='id_"+user["ID"]+"' aria-selected='false' aria-level='1' aria-labelledby='id_"+user["ID"]+"_anchor' aria-expanded='true'  class='jstree-node  jstree-last jstree-closed' >";
							liHtml += "<i  userId='"+user["ID"]+"' onclick='queryReferrerList(\""+user["ID"]+"\")' class='jstree-icon jstree-ocl' role='presentation'></i>";
							liHtml += "<a class='jstree-anchor' href='#' tabindex='-1' id='id_"+user["ID"]+"_anchor'>";
							liHtml += "<i class='jstree-icon jstree-themeicon' role='presentation'>";
							liHtml += "</i><span class='"+getUserType( user["UPLEVEL"])+"'>"+user["ACCOUNT"]+"("+user["USER_NAME"]+")</span>";
							liHtml += "</a><ul class='jstree-container-ul jstree-children' role='group'><li></li></ul></li>";
						}else{
							liHtml += "<li isHave = '0' id='id_"+user["ID"]+"' userId='"+user["ID"]+"'aria-selected='false' aria-level='1' aria-labelledby='id_"+user["ID"]+"_anchor' aria-expanded='true'  class='jstree-node  jstree-leaf jstree-last' >";
							liHtml += "<i class='jstree-icon jstree-ocl' role='presentation'></i>";
							liHtml += "<a class='jstree-anchor' href='#' tabindex='-1' id='id_"+user["ID"]+"_anchor'>";
							liHtml += "<i class='jstree-icon jstree-themeicon' role='presentation'>";
							liHtml += "</i><span class='"+getUserType( user["UPLEVEL"])+"'>"+user["ACCOUNT"]+"("+user["USER_NAME"]+")</span>";
							liHtml += "</a></li>";
						}
					}
					$(userLi).attr("isHave",2);
					$(userLi).find("ul").html(liHtml);
				}
				return;
			}else {
				alert(data["resultMsg"]);
			}
		});
	}
</script>
<style>
	.tree { border:1px solid black; padding:10px; width:96.5%; margin:20px; float:left; min-height:500px; }
	.uptype_1000 { color: #FF0000; }
	.uptype_100 { color: #00FF00; }
	.uptype_1 { color: #0000FF; }
	.uptype_0 { color: #000000; }
</style>
<div class="c_nav">
	<span>管理选项：</span>
	<a href="referrerAction.do?method=index">管理首页</a>
	<a href="javascript:location.reload()"> | [刷新页面]</a>
</div>
<div class="c_box bg_white">
	<div class="c_topic">用户推荐关系图</div>
		<div id="dataQueryArea" class="c_form_6">
			<ul class=" c_form-label-6 l_mb">
				<li>
					<span class="e_label">用户账号：</span>
					<span class="e_input">
						<input type="text" readonly="readonly" onclick="alertUsers()" name="account" id="account" desc="用户账号" value="" placeholder="点击选择用户"/>
						<input type="hidden" name="userId" id="userId" desc="用户ID" value=""/>
						<input type="hidden" name="uplevel" id="uplevel" desc="用户ID" value=""/>

					</span>
				</li>
				<li>
					<span class="e_label">用户名称：</span>
					<span class="e_input">
						<input type="text" readonly="readonly" onclick="alertUsers()" name="userName" id="userName" desc="用户名称" value="" placeholder="点击选择用户"/>
					</span>
				</li>
				<li>
					<span class="e_label">查询类型：</span>
					<span class="e_select">
						<select name="type" id="type" >
							<option value="1">向下查询</option>
							<option value="2">向上查询</option>
						</select>
					</span>
				</li>
				<li>
					<button type="button" onclick="initReferrer();" class="l_ml e_btn-form">查询</button>
				</li>
			</ul>
		</div>
	</div>
	<div style="padding:10px 10px 0px 10px; margin:20px 20px 0px 20px;">
		<span style="background:#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;</span> 段长 &nbsp;&nbsp;
		<span style="background:#00FF00">&nbsp;&nbsp;&nbsp;&nbsp;</span> 修路人 &nbsp;&nbsp;
		<span style="background:#0000FF">&nbsp;&nbsp;&nbsp;&nbsp;</span> 体验官 &nbsp;&nbsp;
		<span style="background:#000000">&nbsp;&nbsp;&nbsp;&nbsp;</span> 普通会员
	</div>
	<div class="tree jstree jstree-2 jstree-default" id="tree" role="tree" aria-multiselectable="true" tabindex="0" aria-busy="false">

	</div>
</div>
<#include "../footer.html">